<template>
  <div  style="padding: 10px;">
    <NButton>1233</NButton>
    <div style="margin-top: 10px;">
      <n-data-table :data="dataList"
                 :columns="createColumns()"
      ></n-data-table>
    </div>
  </div>
</template>
<script lang="jsx">
import { h, defineComponent,renderSlot  } from "vue";

export default {
  components: {
  },
  data() {
    return {
      dataList: [{title:'草地1',}],

    };
  },
  methods: {
    createColumns() {
      return [
        {
          title: '菜单名称',
          key: 'length',
          render(row) {
          return h(<div>
           <n-tooltip trigger="hover">
             {{trigger:()=><n-button> 鸭子 </n-button>}}
               如果它长得像鸭子，走起来像鸭子，叫起来也像鸭子，那它一定是个鸭子。
          </n-tooltip>
          </div>)
          }
        },
        {
          title: '操作',
          key: '操作',
          render(row) {
            return  h(<div>
              <NButton type="text">编辑</NButton>
              <NButton type="text">新增下级</NButton>
              <NButton type="text">删除</NButton>
            </div>)
          }
        },
      ];
    },
  },
};
</script>
